<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path: '/home/goods'}">商品列表</el-breadcrumb-item>
            <el-breadcrumb-item>{{isChange?'修改商品':'新增商品'}}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-form :model="goodItem" ref="goodsForm" label-width="100px" class="goods-ruleForm" :rules="rules">
            <el-form-item
                label="商品名称"
                prop="goods_name">
                <el-input  v-model="goodItem.goods_name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
                label="商品价格"
                prop="goods_price">
                <el-input  v-model="goodItem.goods_price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
                label="商品数量"
                prop="goods_number">
                <el-input  v-model="goodItem.goods_number" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
                label="商品重量"
                prop="goods_weight">
                <el-input  v-model="goodItem.goods_weight" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
                label="商品图标"
                prop="goods_big_logo">
                <el-upload
                class="avatar-uploader"
                :action="url"
                :headers="headers"
                name="file"
                :on-success="fileUploadSuccess"
                :on-error="fileUploadSuccess"
                >
                     <img v-if="goodItem.goods_big_logo" :src="goodItem.goods_big_logo" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script>
export default {
  mounted() {
    const item = window.sessionStorage.getItem('goods')
    try {
      if (!this.isEmpty(item)) {
        this.goodItem = JSON.parse(item)
        this.goodItem.cat_id = 1
        this.isChange = true
      }
    } catch (error) {
      console.log(error)
    }
  },
  data() {
    return {
      isChange: false,
      goodItem: {},
      url: 'http://www.localhost:8888/api/private/v1/upload',
      headers: {
        'Authorization': window.sessionStorage.getItem('token')
      },
      rules: {
        goods_name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, message: '长度在 3 个字符以上', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    isEmpty(obj) {
      if (typeof obj === 'undefined' || obj === null || obj === '') {
        return true
      } else {
        return false
      }
    },
    fileUploadSuccess(response, file, fileList) {
      if (response.meta.status === 200) {
        this.goodItem.goods_big_logo = response.data.url
        console.log(this.goodItem)
      }
    },
    async submitForm() {
      const params = {
        url: this.isChange ? `/goods/${this.goodItem.goods_id}` : '/goods',
        params: this.goodItem,
        method: this.isChange ? 'PUT' : 'POST'
      }
      console.log(this.$parent)
      const res = await this.$send(params)
      this.$root.$emit('notifyGoods', res.meta.msg)
      this.$router.go(-1)
      if (res.meta.status === 200) {
        const msg = this.isChange ? '新增成功' : '修改成功'
        this.$showMsg(msg)
      }
    }
  },
  props: ['good', 'flag']
}
</script>

<style lang="less" scoped>
.avatar-uploader .el-upload {
  border: 10px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
